﻿@using thousandClear.Areas.Shop.Models

@model GoodViewModel

<div id="app">
    <div class="top-header ui-row-flex">
        <div class="top-header-return ui-col ui-col-10 ui-flex ui-flex-pack-start ui-flex-align-center" v-on:tap="backHome">
            <i class="ui-icon-return"></i><span>首页</span>
        </div>
        <div class="top-header-title ui-col ui-col-80 ui-flex ui-flex-align-center ui-flex-pack-center">
            <h2>商品详情</h2>
        </div>
        <div class="ui-col ui-col-10">
        </div>
    </div>
    <div class="product-info" v-if="showProduct">
        <div class="product-photo">
            <img src="@Model.ImgUrl" width="100%" />
        </div>
        <div class="product-name">
            @Model.Name
        </div>
        <div class="product-sprice">
            积分: @Model.Credit
        </div>
        @*<div>
                <span class="product-mprice">￥ {{marketPrice}}</span>
            </div>*@
        @*<div class="product-postfee">
                <span class="product-sales">库存: {{inventory}} 件</span>
            </div>*@
        <div class="ui-row-flex">
            <div class="product-quantity ui-col">
                数量:
                <button class="ui-btn" v-on:tap="subQuantity">-</button>
                <span id="qty">1</span>
                <button class="ui-btn" v-on:tap="addQuantity">+</button>
            </div>
        </div>
        <div class="ui-row-flex">
            <div class="ui-col"></div>
            <div class="product-buynow ui-col ui-col-4 ui-flex ui-flex-align-center ui-flex-pack-end">
                @*<button class="ui-btn ui-btn-danger" v-on:tap="addCart">加入购物车</button>*@
                <button class="ui-btn ui-btn-primary" v-on:tap="buyNow">立即兑换</button>
                @*<a href="javascript:;" class="ui-btn ui-btn-danger">敬请期待</a>*@
            </div>
        </div>
        <div class="product-title">
            <span>商品描述</span>
        </div>
        <div class="product-desc">
            @Html.Raw(Model.ImgDesc)
        </div>
    </div>
    <div class="product-receive" v-if="showReceive">
        <div class="product-title">
            <span>收货地址</span>
        </div>
        <div class="receive-info">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-border-b">
                        <label>
                            收货人
                        </label>
                        <input type="text" placeholder="名字" v-model="receiveMan">
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>
                            联系电话
                        </label>
                        <input type="tel" placeholder="手机或固话" v-model="receiveMobile">
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>选择地区</label>
                        <div class="ui-select-group">
                            <div class="ui-select">
                                <select v-on:change="onProvinceChange" v-model="SelectProvince" id="ddlProvince">
                                    <option value="0">请选择</option>
                                    <option v-bind:value="pvc.DATID" v-for="pvc in provinces">{{pvc.datDesc}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui-form-item ui-border-b" v-if="showCity">
                        <label></label>
                        <div class="ui-select-group">
                            <div class="ui-select" v-if="showCity">
                                <select v-on:change="onCityChange" v-model="SelectCity" id="ddlCity">
                                    <option value="0">请选择</option>
                                    <option v-bind:value="pvc.DATID" v-for="pvc in cities">{{pvc.datDesc}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui-form-item ui-border-b" v-if="showDistrict">
                        <label></label>
                        <div class="ui-select-group">
                            <div class="ui-select" v-if="showDistrict">
                                <select id="ddlBlock" v-model="SelectBlock">
                                    <option value="0">请选择</option>
                                    <option v-bind:value="pvc.DATID" v-for="pvc in block">{{pvc.datDesc}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>
                            邮编
                        </label>
                        <input type="tel" placeholder="邮政编码" v-model="receiveZipCode">
                    </div>
                    <div class="ui-form-item ui-form-item-textarea ui-border-b">
                        <label>
                            详细地址
                        </label>
                        <textarea placeholder="街道小区门牌信息" v-model="receiveAddress"></textarea>
                    </div>
                    <div class="ui-form-item ui-form-item-textarea ui-border-b">
                        <label>
                            备注
                        </label>
                        <textarea placeholder="备注信息" v-model="remark"></textarea>
                    </div>
                </form>
                @*<div class="ui-flex ui-flex-pack-end receive-postfee">
                        <span>运费: ￥{{postFee/100.00}}元</span>
                    </div>*@
            </div>
            <div class="ui-btn-group" style="margin-top:15px;">
                <button class="ui-btn ui-btn-danger" v-on:tap="backProduct">返回</button>
                <button class="ui-btn ui-btn-primary" v-on:tap="buyConfirm">确认兑换</button>
            </div>
        </div>
    </div>

    <form id="form" method="post" action="product">
        <input type="hidden" name="data" v-bind:value="data" />
    </form>
    <div id="loading" class="ui-loading-block">
        <div class="ui-loading-wrap">
            <div class="ui-loading-cnt">
                <div class="sk-wave">
                    <div class="sk-rect sk-rect1"></div>
                    <div class="sk-rect sk-rect2"></div>
                    <div class="sk-rect sk-rect3"></div>
                    <div class="sk-rect sk-rect4"></div>
                    <div class="sk-rect sk-rect5"></div>
                </div>
                <i>正在加载中...</i>
            </div>
        </div>
    </div>
    @*<div id="cart" v-on:tap="viewCart">
            <div class="ui-badge-wrap ui-label" style="display: block; position:fixed; width: 30px; height:50px; line-height: 60px; right: 10px; bottom: 10px; z-index: 1000; background:#80C3B1;"><i class="ui-icon-cart" style="margin-top: 3px; color: #fff; "></i><div class="ui-badge-cornernum" v-if="cartCount > 0">{{cartCount}}</div></div>
        </div>*@
</div>

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script src="~/Statics/Venders/uedit-1.4.3.1/ueditor.parse.min.js"></script>

    <script type="text/javascript">

        var model = new Vue({
            el: '#app',
            data: {
                id: @Model.DSGID,
                goodName: '@Model.Name',
                goodDesc: '',
                goodImgDesc: '',
                @*salePrice: @Model.SalePrice,*@
                @*marketPrice: @Model.MarketPrice,*@
                @*inventory: @Model.Invertory,*@
                quantity: 1,
                imgUrl: '@Model.ImgUrl',
                openid: '@ViewBag.OpenId',

                showProduct: true,
                showReceive: false,
                weight: "",
                @*cartCount: @ViewBag.CartCount,*@
                @*mode: @ViewBag.Mode,*@
                credit: '@Model.Credit',

                provinces:@Html.Raw(ViewBag.Provinces),
                selectedProvince: 0,
                cities: [],
                selectedCity: 0,
                showCity: false,
                districts: [],
                selectedDistrict: 0,
                showDistrict: false,
                regionId: 0,
                receiveMan: '',
                receiveMobile: '',
                receiveAddress: '',
                receiveZipCode: '',
                remark: '',
                postFee: 0,

                SelectProvince: 0,
                SelectCity: 0,
                SelectBlock: 0
            },
            computed: {
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            backProduct: function () {
                var self = this;
                self.showProduct = true;
                self.showReceive = false;

                self.regionId = 0;
                self.receiveMan = '',
                self.receiveMobile = '',
                self.receiveZipCode = '',
                self.receiveAddress = '',

                self.postFee = 0,
                self.showCity = false;
                self.showDistrict = false;
            },
            methods: {

                showLoading: function () {
                    $('#loading').addClass('show');
                },
                hideLoading: function () {
                    $('#loading').removeClass('show');
                },
                addQuantity: function () {
                    this.quantity += 1;

                    $("#qty").text(parseInt($("#qty").text())+1);

                },
                subQuantity: function () {
                    if (this.quantity <= 1)
                        return;

                    this.quantity -= 1;
                    $("#qty").text(parseInt($("#qty").text())-1);

                },
                backHome: function () {
                    window.location.href = '../../../shop/Market?openid=@ViewBag.OpenId';
                },
                buyNow: function () {
                    var self = this;

                    self.showReceive = true;
                    self.showProduct = false;
                    //$('form').submit();
                },
                buyConfirm: function () {
                    var self = this;

                    if (self.receiveMan == '') {
                        self.showError('请输入收货人姓名')
                        return;
                    }

                    if (self.receiveMobile == '') {
                        self.showError('请输入手机号或固话')

                        return;
                    }

                    if (self.SelectProvince == 0) {
                        self.showError('请选择省份')

                        return;
                    }

                    if(self.SelectCity==0){
                        self.showError('请选择市')

                        return;
                    }
                    if(self.SelectBlock==0){
                        self.showError('请选择区')

                        return;
                    }


                    if (self.receiveZipCode == '') {
                        self.showError('请输入邮政编码')

                        return;
                    }

                    if (self.receiveAddress == '') {
                        self.showError('请输入详细地址')

                        return;
                    }

                    self.showLoading();

                    $('#form').submit();
                },
                backProduct:function(){
                    var self = this;
                    self.showProduct = true;
                    self.showReceive = false;

                    self.regionId = 0;
                    self.receiveMan = '',
                    self.receiveMobile = '',
                    self.receiveZipCode = '',
                    self.receiveAddress = '',

                    self.postFee = 0,
                    self.showCity = false;
                    self.showDistrict = false;
                },
                onProvinceChange: function () {
                    var self = this;

                    var data1 = '{"id":"'+self.SelectProvince+'"}';

                    $.ajax({
                        type: "GET",
                        url: "http://www.qianjing-china.com/thousandClear/Shop/Product/changeCustomerPlace/"+self.SelectProvince,
                        contentType: "application/json",
                        success: function (data) {
                            self.cities = eval(data);
                            self.showCity = true;
                            self.showDistrict = false;
                            self.SelectCity = 0;
                            self.SelectBlock = 0;

                        }
                    });
                },
                onCityChange: function () {
                    var self = this;
                    $.ajax({
                        type: "GET",
                        url: "http://www.qianjing-china.com/thousandClear/Shop/Product/changeCustomerPlace/" + self.SelectCity,
                        contentType: "application/json",
                        success: function (data) {
                            self.block = eval(data);
                            self.showDistrict = true;
                            self.SelectBlock = 0;

                        }
                    });
                },
                onDistrictChange: function () {

                },
                checkRegionId: function (id) {
                    var check = (id / 100 - parseInt(id / 100)) > 0;

                    return check;
                },
                showError: function (msg) {
                    swal({
                        title: "",
                        text: msg,
                        type: "error",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                },
                showSuccess: function (msg) {
                    swal({
                        title: "",
                        text: msg,
                        type: "success",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                }
            }
        });

        uParse('.product-desc', {
            rootPath: '~/Statics/Venders/uedit-1.4.3.1/'
        })
    </script>
}

@section Styles{
    @Styles.Render("~/cssbundles/consumer/address")
    <style>
        body {
            background-color: #fff3f9;
        }

        .top-header {
            font-size: 16px;
            color: #fff3f9;
            background-color: #60B49D;
        }

        .top-header-title {
            font-weight: bold;
        }

        .top-header .ui-icon-return {
            font-size: 0.25rem;
            color: #fff3f9;
        }

        .ui-slider {
            margin-top: 20px !important;
        }

        .ui-slider-indicators {
            -webkit-box-pack: center;
        }

        .product-title {
            margin-top: 10px;
        }

            .product-title span {
                margin-left: 10px;
                padding-left: 20px;
                font-weight: bold;
                border-left: 5px solid #80C3B1;
            }


        .product-buynow {
            padding-right: 10px;
        }

        .product-name, .product-desc {
            padding: 10px;
            font-size: 14px;
            color: #80C3B1;
        }

        .product-desc {
            margin-bottom: 56px;
        }

        .product-sprice {
            padding-left: 10px;
            font-size: 18px;
            color: #ff75ac;
        }

        .product-photo {
            margin-top: 10px;
            padding: 0 5px;
        }

        .product-mprice {
            padding-left: 10px;
            text-decoration: line-through;
        }

        .product-postfee {
            padding-left: 10px;
        }

        .product-quantity {
            padding: 10px;
        }

            .product-quantity span {
                margin: 0 5px;
                font-size: 14px;
                line-height: 30px;
            }

            .product-quantity button {
                min-width: 20px;
            }

        .product-mprice, .product-sales, .product-postfee, .product-quantity {
            font-size: 14px;
            color: #80C3B1;
        }

        .ui-badge {
            margin-left: -20px;
            height: 12px;
            line-height: 12px;
            padding: 0 3px;
        }

        .ui-footer {
            height: 42px;
        }

        .ui-actionsheet h4 {
            text-align: left;
            height: 50px;
            padding-top: 3px;
        }

            .ui-actionsheet h4 span {
                width: 40px;
                display: inline;
                height: 30px;
                padding-left: 10px;
                padding-right: 10px;
            }

            .ui-actionsheet h4 button {
                width: 30px;
                display: inline;
                height: 30px;
                line-height: 30px;
            }

        .ar {
            text-align: right;
        }

        .ui-actionsheet .ui-icon-close-page {
            margin-left: 15px;
        }

        .receive-info {
            padding: 10px;
            font-size: 14px;
            color: #80C3B1;
        }

        .receive-postfee {
            font-weight: bold;
            padding: 15px;
        }
    </style>
}

